@use '../../shared/styles/theme';

@mixin focusStyles() {
	outline: 1px solid var(--vscode-focusBorder);
	outline-offset: -1px;
}

:root {
	--gitlens-z-inline: 1000;
	--gitlens-z-sticky: 1100;
	--gitlens-z-popover: 1200;
	--gitlens-z-cover: 1300;
	--gitlens-z-dialog: 1400;
	--gitlens-z-modal: 1500;
}

body {
	--avatar-size: 2.4rem;
	--focus-color: var(--vscode-focusBorder);
	--table-separator: var(--vscode-textSeparator-foreground);
	--table-heading: var(--color-foreground--50);
	--table-text: var(--color-foreground--65);
	--table-pinned-background: var(--color-background);
	--layout-gutter-outer: 20px;
	--gk-input-background-color: var(--vscode-input-background);
	--gk-input-border-color: var(--vscode-input-border);
	--gk-input-color: var(--vscode-input-foreground);
	--gk-text-secondary-color: var(--color-foreground--65);
	--gk-button-ghost-color: var(--color-foreground--50);

	--gk-menu-border-color: var(--vscode-menu-border);
	--gk-menu-background-color: var(--vscode-menu-background);
	--gk-menu-item-background-color-hover: var(--vscode-menu-selectionBackground);
	--gk-menu-item-background-color-active: var(--vscode-menu-background);
	--gk-focus-border-color: var(--focus-color);
	--gk-badge-outline-color: var(--vscode-badge-foreground);
	--gk-badge-filled-background-color: var(--vscode-badge-background);
	--gk-badge-filled-color: var(--vscode-badge-foreground);
	--gk-tooltip-padding: 0.4rem 0.8rem;
}

.vscode-high-contrast,
.vscode-dark {
	--avatar-bg: var(--color-background--lighten-30);
	--background-05: var(--color-background--lighten-05);
	--background-075: var(--color-background--lighten-075);
	--background-10: var(--color-background--lighten-10);
	--background-15: var(--color-background--lighten-15);
	--background-30: var(--color-background--lighten-30);
	--background-50: var(--color-background--lighten-50);
	--popover-bg: var(--color-background--lighten-15);
}

.vscode-high-contrast-light,
.vscode-light {
	--avatar-bg: var(--color-background--darken-30);
	--background-05: var(--color-background--darken-05);
	--background-075: var(--color-background--darken-075);
	--background-10: var(--color-background--darken-10);
	--background-15: var(--color-background--darken-15);
	--background-30: var(--color-background--darken-30);
	--background-50: var(--color-background--darken-50);
	--popover-bg: var(--color-background--darken-15);
}

:root {
	font-size: 62.5%;
	font-family: var(--font-family);
	box-sizing: border-box;
}

body {
	font-family: var(--font-family);
	font-size: var(--font-size);
	color: var(--color-foreground);
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

:not(:defined) {
	visibility: hidden;
}

body[data-placement='editor'] {
	background-color: var(--color-background);

	[data-placement-hidden='editor'],
	[data-placement-visible]:not([data-placement-visible='editor']) {
		display: none !important;
	}
}

body[data-placement='view'] {
	[data-placement-hidden='view'],
	[data-placement-visible]:not([data-placement-visible='view']) {
		display: none !important;
	}
}

[hidden] {
	display: none !important;
}

a {
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}
}

a,
button:not([disabled]),
[tabindex]:not([tabindex='-1']) {
	&:focus {
		@include focusStyles();
	}
}

code-icon {
	font-size: inherit;
}

h2,
h3,
p {
	margin-top: 0;
}

h3 {
	margin-bottom: 0;
}

.alert {
	display: flex;
	flex-direction: row;
	padding: 0.8rem 1.2rem;
	background-color: var(--color-alert-neutralBackground);
	border-left: 0.3rem solid var(--color-foreground--50);
	color: var(--color-alert-foreground);

	code-icon {
		margin-right: 0.4rem;
		vertical-align: baseline;
	}

	&__content {
		font-size: 1.2rem;
		line-height: 1.2;
		text-align: left;
	}
}

.tab-filter {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 1rem;

	&__tab {
		padding: 0.2rem 0;
		text-transform: uppercase;
		color: var(--color-foreground--65);
		border: none;
		background: none;
		text-align: center;
		font-size: 1.1rem;
		border-bottom: 0.1rem solid transparent;
		cursor: pointer;

		&.is-active {
			color: var(--vscode-foreground);
			border-bottom-color: var(--color-foreground);
		}
	}
}

.app {
	display: flex;
	flex-direction: column;
	height: 100vh;

	&__toolbar {
		background-color: var(--background-05);
		display: grid;
		align-items: center;
		padding: 0.2rem 2rem;
		margin-left: -2rem;
		margin-right: -2rem;
		grid-template-columns: 1fr min-content min-content;
		gap: 0.5rem;
		z-index: 101;
	}

	&__content {
		position: relative;
		flex: 1 1 auto;
		overflow: hidden;
	}

	&__focus {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		height: 100%;
		gap: 1.2rem;
	}

	&__header {
		flex: none;
		display: flex;
		flex-direction: column;
		gap: 1.6rem;
		padding-top: 1.2rem;
		z-index: 1;

		&-group {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			gap: 0.4rem;
		}
	}

	&__search {
		flex: 1;

		code-icon {
			margin-right: 0.8rem;
		}
	}

	&__main {
		min-height: 0;
		flex: 1 1 auto;
		overflow: auto;
	}
}

.preview {
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-foreground);
}

.mine-menu {
	width: max-content;
}

gk-tooltip gk-menu {
	z-index: 10;
}
